<template>
  <div
    class="zz-steps"
    :class="[
      `zz-steps-${direction}`,
      size === 'small' ? 'zz-steps--small' : 'zz-steps--default',
      { 'zz-steps--simple': simple },
    ]"
  >
    <div
      v-for="(item, index) in steps"
      :key="index"
      class="zz-step"
      :class="[`is-${getStepStatus(index)}`]"
    >
      <!-- 节点：图标 + 文本 -->
      <div class="zz-step__node">
        <div class="zz-step__icon">
          <span v-if="getStepStatus(index) !== 'finish'">{{ index + 1 }}</span>
          <span v-else class="zz-step__check">✔</span>
        </div>
        <div class="zz-step__main">
          <div class="zz-step__title">{{ item.title }}</div>
          <div v-if="item.description" class="zz-step__desc">
            {{ item.description }}
          </div>
        </div>
      </div>
      <!-- 连接线位于文本之后（最后一个不显示） -->
      <div v-if="index !== steps.length - 1" class="zz-step__line"></div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: "zzSteps" });

const props = defineProps({
  steps: {
    type: Array,
    default: () => [],
  },
  // 当前步骤（从 0 开始）
  current: {
    type: Number,
    default: 0,
  },
  // 当前步骤的状态：process|finish|error|wait
  status: {
    type: String,
    default: "process",
    validator: (v) => ["process", "finish", "error", "wait"].includes(v),
  },
  // 横向或纵向
  direction: {
    type: String,
    default: "horizontal",
    validator: (v) => ["horizontal", "vertical"].includes(v),
  },
  // 尺寸
  size: {
    type: String,
    default: "default",
    validator: (v) => ["default", "small"].includes(v),
  },
  // 简洁模式：连接线以直线展示
  simple: {
    type: Boolean,
    default: true,
  },
});

// 计算每一步的状态
const getStepStatus = (index) => {
  if (index < props.current) return "finish";
  if (index === props.current) return props.status || "process";
  return "wait";
};
</script>

<style lang="less" scoped>
/* 容器 */
.zz-steps {
  display: flex;
  width: 100%;
  padding: 0 4% 10px 4%;
  box-sizing: border-box;
}

/* 布局方向 */
.zz-steps-horizontal {
  flex-direction: row;
}
.zz-steps-vertical {
  flex-direction: column;
}

/* 步骤项：横向时一行显示，纵向时上下显示 */
.zz-step {
  position: relative;
  display: flex;
  align-items: center;
}

/* 节点（图标 + 文本） */
.zz-step__node {
  display: flex;
  align-items: center;
}

/* 图标（圆形数字/对勾） */
.zz-step__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--el-border-color);
  color: var(--el-text-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-bg-color);
  z-index: 1;
}

/* 主体文字 */
.zz-step__main {
  margin-left: 10px;
}
.zz-step__title {
  font-size: 14px;
  line-height: 22px;
  color: var(--el-text-color-primary);
}
.zz-step__desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 完成状态：蓝色圆框，标题变蓝 */
.zz-step.is-finish .zz-step__icon {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

/* 进行中：实心蓝底白字 */
.zz-step.is-process .zz-step__icon {
  background: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: #fff;
}

/* 错误：红色 */
.zz-step.is-error .zz-step__icon {
  background: var(--el-color-danger);
  border-color: var(--el-color-danger);
  color: #fff;
}

/* 颜色联动 */
.zz-step.is-finish .zz-step__title,
.zz-step.is-process .zz-step__title {
  color: var(--el-color-primary);
  font-weight: 600;
}

/* 连接线：横向时横线自动拉伸，纵向时竖线在下方 */
.zz-steps-horizontal .zz-step {
  flex: 1;
  min-width: 140px;
}
.zz-steps-horizontal .zz-step:last-child {
  flex: 0 0 auto;
  min-width: auto;
}
.zz-steps-horizontal .zz-step__line {
  flex: 1;
  height: 2px;
  margin: 0 12px;
  background-color: var(--el-border-color);
}
.zz-steps-vertical {
  .zz-step {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .zz-step:last-child {
    margin-bottom: 0;
  }
  .zz-step__line {
    width: 2px;
    height: 24px;
    margin: 8px 12px;
    background-color: var(--el-border-color-lighter);
  }
}

/* 尺寸：small */
.zz-steps--small .zz-step__icon {
  width: 22px;
  height: 22px;
}

/* 对勾样式 */
.zz-step__check {
  font-size: 14px;
}
</style>
